<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>公众号授权2</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/authorization2.css">
    <style>
     
    </style>
</head>
<body>
    <div id="app">
        <top-bar :topshuju=sendTopData ></top-bar>
        <section class="content">
            <section class="cont-title">
                <div>
                    <h1>公众号管理</h1>
                    <p> <img src="../img/authList01.png"> 您当前为"免费版"套餐用户,授权公众号数量已达上限。<a>立即升级</a></p>
                </div>
                <div class="btnBox">
                    <span class="">申请公众号</span>
                    <span class="">授权新公众号</span>
                </div>
                 
            </section>
            <section class="cont-details">
                <ul>
                    <li v-for="(item,index) in list" :key="index">
                        <p class="fuwuhao">{{item.isRenzheng?"认证服务号":"未认证服务号"}}</p>
                        <section class="details-head">
                            <span :class="{'color999':!item.isAuth}">{{item.name}}</span>
                            <img v-if="item.isAuth" src="../img/authList03.png"/> 
                            <img v-if="!item.isAuth" src="../img/auth05.png"/> 
                            <span class='haveAuth' :class="{'noAuth':!item.isAuth}">{{item.isAuth?'已授权':'已取消授权'}}</span>
                        </section>
                        <section class="details-body">
                            <div class="details-body-left">
                                <section class="body-left-top">
                                    <div class="top-imgBox">
                                        <img :src="item.img">
                                        <div class="imgBox-marsk" v-if="!item.isAuth"></div>
                                    </div>
                                    <div class="top-cont" :class="{'color999':!item.isAuth}">
                                        <p> <span>Appid:</span> {{item.Appid}}</p>
                                        <p> <span>微信号:</span> {{item.wx}}</p>
                                        <p> <span>主体名称:</span> {{item.ztname}}</p>
                                    </div>
                                </section>
                                <section class="body-left-bottom">
                                    <span :class="{'borderF2F2F2':!item.isAuth}">设计微站</span><span :class="{'borderF2F2F2':!item.isAuth}">公众号信息</span><span :class="{'Background_CCC':!item.isAuth}">运营数据分析</span>
                                </section>

                            </div>
                            <div class="details-body-right">
                                <span>后台管理</span>
                                <span>重新授权</span>
                            </div>
                        </section>
                    </li>
                </ul>
            </section>
        </section>
    </div>
</body>
<!-- 头部 -->
<script src="../common/top-bar.js"></script>
<script>
  new Vue({
      el: '#app',
      data: {
          list: [
          {'name':'MEOSOFT','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技1','isAuth':true,isRenzheng:true},
              {'name':'MEOSOFT22222','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技2','isAuth':false,isRenzheng:false},
              {'name':'MEOSOFT33333','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技3','isAuth':false,isRenzheng:true},{'name':'MEOSOFT','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技1','isAuth':true,isRenzheng:true},
              {'name':'MEOSOFT22222','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技2','isAuth':false,isRenzheng:false},
              {'name':'MEOSOFT33333','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技3','isAuth':false,isRenzheng:true},{'name':'MEOSOFT','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技1','isAuth':true,isRenzheng:true},
              {'name':'MEOSOFT22222','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技2','isAuth':false,isRenzheng:false},
              {'name':'MEOSOFT33333','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技3','isAuth':false,isRenzheng:true},{'name':'MEOSOFT','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技1','isAuth':true,isRenzheng:true},
              {'name':'MEOSOFT22222','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技2','isAuth':false,isRenzheng:false},
              {'name':'MEOSOFT33333','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技3','isAuth':false,isRenzheng:true},{'name':'MEOSOFT','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技1','isAuth':true,isRenzheng:true},
              {'name':'MEOSOFT22222','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技2','isAuth':false,isRenzheng:false},
              {'name':'MEOSOFT33333','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技3','isAuth':false,isRenzheng:true},{'name':'MEOSOFT','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技1','isAuth':true,isRenzheng:true},
              {'name':'MEOSOFT22222','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技2','isAuth':false,isRenzheng:false},
              {'name':'MEOSOFT33333','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技3','isAuth':false,isRenzheng:true},{'name':'MEOSOFT','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技1','isAuth':true,isRenzheng:true},
              {'name':'MEOSOFT22222','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技2','isAuth':false,isRenzheng:false},
              {'name':'MEOSOFT33333','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技3','isAuth':false,isRenzheng:true},{'name':'MEOSOFT','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技1','isAuth':true,isRenzheng:true},
              {'name':'MEOSOFT22222','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技2','isAuth':false,isRenzheng:false},
              {'name':'MEOSOFT33333','img':'../img/authList02.png','Appid':' wx38a71c12313546','wx':'123131313','ztname':'上海族蚂信息科技3','isAuth':false,isRenzheng:true},
          ],
          sendTopData:{
                YourName:'Thinker',
                CommonName:'上海有限公司2222222222222222222222222',
                HeadImg:'../img/authList02.png'
            }
      },
      methods: {

      }
  })
</script>
</html>